<template>
  <app-scroll-view occupy-height="174px">
    <div>
      <div class="user-item" @click="openChat(item)"
           :class="{'active':$store.state.customer.activeUser&&item.username===$store.state.customer.activeUser.username}"
           :key="item.username" v-for="item in list">
        <span style="width: 75px;">
          <el-badge v-if="item.count" :value="item.count" :max="99">
            <app-avatar style="margin-left: 10px;" :size="50" :src="item.avatarUrl"></app-avatar>
          </el-badge>
          <app-avatar style="margin-right: 5px;" v-else :size="50" :src="item.avatarUrl"></app-avatar>
        </span>
        <div>
          <div class="name">
            <span :title="item.nickName" style="font-weight: bold">{{ item.nickName }}</span>
            <span :title="item.username" style="color:#787a7e;margin-left: 5px;">[{{
                friendlyDate(item.createTime)
              }}]</span>
            <span :title="item.username" style="color:#1252cc;">[{{ item.username }}]</span>
          </div>
          <div class="msg">
            <div v-if="item.type===0">
              <span>{{ item.message }}</span>
            </div>
            <div v-else-if="item.type===1">
              <span style="font-weight: bold;color: #102bd3">【图片】</span>
              <app-avatar :size="40" :src="item.message"></app-avatar>
            </div>
            <div v-else-if="item.type===2">
              <span style="font-weight: bold;color: #038c40">【视频】</span>
              <app-avatar :size="40" :src="videoImg(item.message)"></app-avatar>
            </div>
            <div v-else-if="item.type===3">
              <span style="font-weight: bold;color: #038c40">【语音】{{ videoImg(item.message) }}秒</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </app-scroll-view>
</template>

<script lang="ts" setup>
import AppScrollView from '@/components/ScrollView/index.vue'
import {store} from "@/store";
import {watch,computed} from "vue";
import {ICustomerInfo} from "@/api/types/customer";
import {getFriendList} from "@/api/customer";
import {IChatUser} from "@/types/store/customer";
import {friendlyDate} from "@/utils/constants";

const list = computed(() => {
  return store.state.customer.friendList
})

// 监听客服切换
watch(() => store.state.customer.user, async (user: ICustomerInfo) => {
  store.state.customer.friendList = await getFriendList(user.openId!)
  if (store.state.customer.friendList) {
    openChat(store.state.customer.friendList[0])
  }
})

const videoImg = (path: string) => {
  return path.substring(path.indexOf(',') + 1)
}

// 打開窗口
const openChat = (item: IChatUser) => {
  store.commit('customer/setActiveUser', item)
}

</script>

<style lang="scss" scoped>

div.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 75px;
  cursor: pointer;
  border-bottom: 1px slategrey dashed;

  &.active {
    background: #b3c5ea !important;
  }

  &:hover {
    background: #d8deea;
  }

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1;
    position: relative;

    span {
      text-align: left;
      flex: 1;
      font-size: 13px;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }

    & > div.name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #474748;
    }

    & > div.msg {
      height: 35px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #098fb6;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 210px;

      span {
        font-size: 14px;
      }

      & > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }


}


div.search {
  z-index: 100;
  position: relative;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ebedee;
  width: 290px;
  padding: 4px;
}
</style>
